<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>form表单</title>
    <style>
        input{
            border: transparent;
        }
    </style>
</head>
<body>
    <!--form用来定义一个表单-->
    <!--
        target: 代表提交的地址
        method: 提交的请求方式
    -->
    <form target="javascript;;" method="POST">
        <!--
            input定义一个表单输入框
            value: 设置表单元素的默认值.
            type: 设置表单元素的类型.
            text: 代表是文本框.
            name: 设置表单提交时的属性名称.
            required: 代表必填项,如果没有填,则会在提交时弹出提示信息.
        -->
        用户名: 
        <input type="text" name="usrname" value="" placeholder="请输入用户名" autocomplete="off" required>
        <!--密码框.设置type = password会对输入内容加密.-->

        <br>

        密码: 
        <input type="password" name="psw" placeholder="请输入密码" autocomplete="off">

        <!--button标签用来定义一个按钮.-->
        <button type="button" onclick="myClick()">显示密码</button>
        <!--input的type=button代表定义一个按钮-->
        <input type="button" onclick="myClick2()" value="密码加密">

        <br>
        <label for="email">邮箱: </label>
        <input type="email" name="email" value="" placeholder="请输入电子邮箱">
        
        <!--type=color 定义一个颜色的选择框-->
        <input type="color">

        <br>
        <!--type=range 定义一个滑杆,max设置滑杆的最大值,min设置滑杆的最小值.-->
        <input type="range" max="100" min="0">

        <br>
        <!--type=number 定义一个数字的选择框, 并且带有一对自增自减按钮-->
        <input type="number">

        <br>
        <!--type="file" 定义文件选择框-->
        <input type="file">

        <br>
        <!--
            type="radio" 定义一个单选框,其中两个单选框的name属性需要一致,这样才会选中一个的时候取消另一个
            checked 设置打开页面时被默认选中.
        -->
        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="female">女
        

        <br>
        <!--type="checkbox" 定义一个多选框.-->
        <input type="checkbox" name="cars" value="BMW">BMW
        <input type="checkbox" name="cars" value="QQ">QQ
        <input type="checkbox" name="cars" value="audi">奥迪

        <br>
        <!--
            select: 定义一个下拉框;
            option: 定义下拉的选项;
        -->
        <select>
            <option value="H5">HTML5</option>
            <option value="CSS">CSS</option>
            <option value="JS">JS</option>
            <option value="Python">Python</option>
        </select>

        <br>
        <!--textarea: 定义一个输入域, rows定义行数, cols定义列数. -->
        <textarea rows="10" cols="30"></textarea>

        <br>
        <fieldset>
            <legend>这是一个标题</legend>
            <input type="text" placeholder="请随便输入">
            <!--<input type="text" placeholder="请随便输入">-->
        </fieldset>

        <br>
        <!--
            type=submit 定义一个提交按钮, 提交所有的表单信息
            注意: 如果在表单内部, 有任何一个按钮没有设置type也会具备和submit一样的功能.
        -->
        <input type="submit" value="提交">
    </form>
</body>

<!--script用来定义js代码-->
<script>
    var psw = document.querySelector('input[type=password]');

    function myClick(){
        psw.setAttribute('type','text')
        // alert('xxx')
    }

    function myClick2(){
        psw.setAttribute('type','password')
    }
</script>
</html>